<template>
	<view class="reply">
		<view class="reply-com" v-if="msgShow">
			<input placeholder="请输入你要评论的内容" class="size26 uni-input" :style="msgIcon ? 'width:543rpx;' : 'flex:1;'" placeholder-class="placeholderColor" disabled @tap="reply"/>
			<view class="size26 com-right" @tap="$emit('replyCom')" v-if="msgIcon">
				<i class="icon iconColor size36">&#xe60a;</i>
				<text class="iconColor textck ">{{msg}}</text>
			</view>
		</view>
		<uni-pop type="bottom" :custom="true" ref="unipop" @change="change" :maskClick="maskClick" @touchmove.stop.prevent="moveHandle">
			<view class="reply-content">
				<input 
				   type="text"
				   :placeholder="datainfo.pla" 
				   v-model="datainfo.content" 
				   class="size26 textColor uni-input input" 
				   :cursor-spacing="cursorSpacing"
				   confirm-type="发送"
				   :focus="focus"
				   placeholder-class="placeholderColor" />
				<view class="size26 textBai submit" @tap="submit">发送</view>
			</view>
		</uni-pop>
	</view>
</template>

<script>
	import uniPop from '@/components/uni-popup/uni-popup.vue';
	import {articleEvalDo} from '@/api/common.js'
	export default {
		props:{
			msg:{
				type:Number,
				default:0
			},
			datainfo:{
				type:Object,
				default:()=>{
					return {};
				}
			},
			msgShow:{
				type:Boolean,
				default:true
			},
			essay:{
				type:Number,
				default:1
			},
			msgIcon:{
				type:Boolean,
				default:true
			}
		},
		components:{
			uniPop
		},
		watch:{
			content(newval){
				if(newval){
					this.maskClick = false;
				}else{
					this.maskClick = true;
				}
			}
		},
		data() {
			return {
				maskClick:true,
				content:'',
				focus:false,
				cursorSpacing:uni.getSystemInfoSync().version ? 10 : 0
			};
		},
		methods:{
			moveHandle(){},
			submit(){
				const {datainfo,essay} = this;
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				switch(essay){
					case 1:
					   articleEvalDo(datainfo).then(res=>{
					   	if(res.code == 1){
					   		this.$refs.unipop.close();
					   		this.$emit('success')
					   		uni.hideLoading()
					   	}
					   }).catch()
					   break;
					case 2:
					   this.$emit('replyDo',datainfo)
					   break;
				}
			},
			close(){
				var that = this;
				if(this.datainfo.content){
					uni.showModal({
					    title: '提示',
					    content: '您有内容未发布，确认退出吗?',
					    success: function (res) {
					        if (res.confirm) {
								that.datainfo.content = '';
								that.$refs.unipop.close();
					            // console.log('用户点击确定');
					        } else if (res.cancel) {
					            // console.log('用户点击取消');
					        }
					    }
					});
				}else{
					this.$refs.unipop.close();
				}
			},
			reply(){
				this.$refs.unipop.open();
				this.focus = true;
			},
			replyColse(){
				this.$refs.unipop.close();
			},
			change(e){
				// this.$refs.unipop.open();
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.com-right{
		width: 120upx;
		text-align: center;
	}
	.reply{
		width: 100%;
		height: 120upx;
		.reply-com{
			position: fixed;
			width: 100%;
			height: 120upx;
			background-color: #FFFFFF;
			z-index: 55;
			box-shadow: 0px -5px 17px 4px rgba(202, 202, 202, 0.35);
			padding: 22upx 24upx 32upx 24upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			bottom: 0;
			left: 0;
			.uni-input{
				width: 543upx;
				height: 66upx;
				background-color: #F9F9F9;
				border-radius: 33upx;
				padding-left: 40upx;
				box-sizing: border-box;
			}
			.reply-d{
				width: 140upx;
				height: 66upx;
				border-radius: 33upx;
				background-color:$them-page-color;
				line-height: 66upx;
			}
		}
	}
	.reply-content{
		width: 750upx;
		background-color: #F9F9F9;
		padding: 20upx 24upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.input{
			height:70upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			flex: 1;
			border: 2upx solid #EEEEEE;
			padding: 10upx;
			box-sizing: border-box;
			border-radius: 10upx;
			margin-right:30upx;
		}
		.submit{
			display: block;
			width:120upx;
			height:60upx;
			line-height:60upx;
			border: 2upx solid #EEEEEE;
			text-align: center;
			border-radius:8upx;
			&:nth-child(2){
				background-color:$them-page-color;
			}
		}
	}
</style>
